import React, {Component} from 'react';
import {Layout, Menu, Icon} from 'antd';
import Logo from '@/components/Logo';
import {NavLink} from 'dva/router';
import config from '@/config/menu.config';
import {isUrl} from '@/utils';
import {handlerRouterConfig, getOpenKeys, isAuthority, isAuthority403, getSelectedKey} from './utils';
const {Sider} = Layout;
const {SubMenu} = Menu;

const MenuTitle = props => {
    return (
        <span style={{userSelect: 'none'}}>
            <Icon type={props.icon} />
            <span>{props.text}</span>
        </span>
    );
};

export default class extends Component {
    constructor(props) {
        super(props);
        const routeConfig = handlerRouterConfig(config);
        this.state = {
            openKeys: getOpenKeys(routeConfig, props),
            routeConfig
        };
    }
    componentDidUpdate(prevProps) {
        const {routeConfig} = this.state;
        if (prevProps.location.pathname !== this.props.location.pathname) {
            this.setState({openKeys: getOpenKeys(routeConfig, this.props)});
        }
    }
    onOpenChange = openKeys => {
        this.setState({openKeys: openKeys.pop()});
    };
    renderSubMenu = item => {
        const userAuthority = this.props.global.authority;
        const renderDom = isAuthority(item.authority, userAuthority);
        if (!renderDom) {
            return null;
        }
        return (
            <SubMenu key={item.key} title={<MenuTitle icon={item.icon} text={item.title} />}>
                {this.renderMenuItem(item.children)}
            </SubMenu>
        );
    };
    renderMenuItem = menuItems => {
        const userAuthority = this.props.global.authority;
        return menuItems.map(item => {
            const renderDom = isAuthority(item.authority, userAuthority);
            if (!renderDom) {
                return null;
            }
            return (
                <Menu.Item key={item.path}>
                    {isUrl(item.path) ? (
                        <a href={item.path} target="_blank" rel="noopener noreferrer">
                            {item.icon ? <Icon type={item.icon} /> : null}
                            {item.title}
                        </a>
                    ) : (
                        <NavLink to={item.path}>
                            {item.icon ? <Icon type={item.icon} /> : null}
                            {item.title}
                        </NavLink>
                    )}
                </Menu.Item>
            );
        });
    };
    redirect = () => {
        if (isAuthority403(this.props, config)) {
            const href = window.location.href;
            const is403 = /403/.test(href);
            const ishash = /#\//.test(href);
            if (!is403 && ishash) {
                window.location.href = `#/main/403`;
            }
            if (!is403 && !ishash) {
                window.location.href = `/main/403`;
            }
        }
    };
    render() {
        this.redirect();
        const {routeConfig, openKeys} = this.state;
        const selectedKeys = getSelectedKey(routeConfig, this.props);
        return (
            <Sider
                width="220"
                collapsible={true} // 是否可收起
                defaultCollapsed={false} // 是否默认收起
                breakpoint="xl" // 触发收起打开断点 mac 以上正常不收起
                collapsedWidth="0"
                style={{background: '#fff', borderRight: '2px solid #f0f2f5'}}
            >
                <section className="ui-h-100 flex-col">
                    <Logo {...this.props} />
                    <section className="flex-1" style={{overflowY: 'auto'}}>
                        <Menu
                            mode="inline"
                            style={{border: '0 none'}}
                            onOpenChange={this.onOpenChange}
                            openKeys={[openKeys]}
                            selectedKeys={[selectedKeys]}
                        >
                            {routeConfig.map(item => {
                                if (item.children) {
                                    return this.renderSubMenu(item);
                                } else {
                                    return this.renderMenuItem([item]);
                                }
                            })}
                        </Menu>
                    </section>
                </section>
            </Sider>
        );
    }
}
